<template>
  <div class="outer-box">
    <div class="inner-box">
      <div>地区：<input type="text" @input="areaChange" /></div>
      <div>地区：{{ area }}</div>
      <div>价格：{{ price }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      area: "",
      price: "",
      debounce: this.creatDebounce(),
    };
  },
  methods: {
    areaChange(e) {
      this.area = e.target.value;
      this.debounce(() => {
        if (!this.area) {
          this.price = null;
        } else {
          this.fetch("/price?area=" + this.area).then((res) => {
            this.price = res.infos[0].price.toFixed(2);
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.outer-box {
  padding: 0 20px;
  line-height: 30px;
}
.inner-box {
  padding: 10px 0;
  border-bottom: 1px dashed #333;
}
</style>